<template>
  <div>
    <div class="top">
      <i
        class="el-icon-shopping-cart-full"
        style="color: rgb(255, 103, 0); font-size: 30px; font-weight: bolder"
      ></i>
      <span style="font-size: 30px; font-weight: normal">我的购物车</span>
      <font>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算 </font>
    </div>
    <div class="conter">
      <div class="w">
        <table width="100%">
          <tr height="60px">
            <td><input type="checkbox" v-model="check" @click="all" />全选</td>
            <td></td>
            <td>商品名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>操作</td>
          </tr>
          <tr v-for="item in cart" :key="item.id">
            <td><input type="checkbox" v-model="item.check" /></td>
            <td>
              <img
                :src="`http://101.132.181.9/api/${item.productImg}`"
                alt=""
              />
            </td>
            <td>{{ item.productName }}</td>
            <td>{{ item.price }}元</td>
            <td>
              <el-input-number
                @change="handleChange"
                v-model="item.num"
                :min="1"
                :max="10"
              ></el-input-number>
            </td>
            <td>
              <font color="red"> {{ item.num * item.price }}元</font>
            </td>
            <td>
              <el-button type="danger" circle @click="del(item.productID)"
                >删除</el-button
              >
            </td>
          </tr>
        </table>
        <div class="footer">
          <div class="left">
            <span @click="$router.push('/goods')">继续购物</span>
            <span>共{{ count }}件商品，已选择{{ num }}件</span>
          </div>
          <div class="right">
            <span>合计:{{ zj }}元</span>
            <el-button :disabled="ding" @click="jiesuan" type="danger"
              >去结算</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCart, delCart } from "@/api/user";
export default {
  data() {
    return {
      cart: [],
      flag: true,
      check: false,
      ding: true,
    };
  },
  mounted() {
    this.getCartList();
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    //结算
    jiesuan() {
      console.log(this.cart);
      var car = this.cart.filter((item) => {
        return (item.check = true);
      });
      console.log(car, "订单");
      this.$store.commit("cart", car);
      this.$router.push("confirmOrder");
    },
    //点击全选
    all() {
      this.cart.forEach((item) => {
        item.check = !this.check;
      });
    },
    //点击删除
    async del(id) {
      this.$confirm("此操作将永久删除数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delCart({
            user_id: this.$store.getters.userID,
            product_id: id,
          });
          this.getCartList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //渲然数据
    async getCartList() {
      const res = await getCart({ user_id: this.$store.getters.userID });
      //   console.log(res.data);
      this.cart = res.data.shoppingCartData;
    },
  },
  computed: {
    //总价
    zj() {
      var sum = 0;
      this.cart.filter((item) => {
        if (item.check) {
          sum += item.num * item.price;
        }
      });
      return sum;
    },
    //全部件数
    count() {
      var count = 0;
      this.cart.forEach((item) => {
        count += item.num;
      });
      return count;
    },
    //选中件数
    num() {
      var num = 0;
      this.cart.filter((item) => {
        if (item.check == true) {
          num += item.num;
        }
      });
      return num;
    },
  },
  watch: {
    cart: {
      handler(val) {
        var summ = 0;
        val.forEach((item) => {
          if (item.check) {
            summ++;
          }
        });
        if (summ == val.length && val.length != 0) {
          this.check = true;
        } else {
          this.check = false;
        }
        if (summ >= 1) {
          this.ding = false;
        } else {
          this.ding = true;
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  height: 70px;
  width: 100%;
  line-height: 70px;
  border-bottom: 2px solid rgb(255, 103, 0);
  background: #fff !important;
  i {
    margin-left: 160px;
  }
  span {
    padding-left: 10px;
  }
  font {
    padding-left: 20px;
  }
}
.conter {
  table {
    background: #fff;
    font-weight: normal;
    text-align: center;
    img {
      width: 80px;
      height: 80px;
    }
  }
  .footer {
    width: 100%;
    height: 60px;
    background: #fff;
    line-height: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 330px;
      height: 60px;
      display: flex;
      justify-content: space-between;
      &:span {
        cursor: pointer;
      }
    }
    .right {
      width: 330px;
      height: 60px;
      display: flex;
      justify-content: space-between;
      button {
        border: none;
        width: 180px;
        height: 100%;
      }
    }
  }
}
</style>
